<template>
	<su-popup :show="state.showModel" type="center" round="3" :isMaskClick="false" @close="closePopup"
		@maskClick="closePopup">
		<view class="materials-popup" @tap="ev => ev.stopPropagation()">
			<view class="popup-header">
				<text class="title">资料讲义下载</text>
				<view class="ss-flex-1"></view>
				<view class="close-btn" @tap="closePopup">
					<uni-icons type="close" size="26" style="color:darkgrey;"></uni-icons>
				</view>
			</view>

			<scroll-view class="materials-list" scroll-y>
				<view class="material-item" v-for="item in materials" :key="item.id">
					<view class="material-icon"><uni-icons custom-prefix="iconfont" type="icon-file" size="21"
							style="color:grey;"></uni-icons></view>
					<view class="material-info">
						<text class="lesson-name">{{ item.lesson_name }}</text>
					</view>
					<view class="download-btn ss-flex" @tap="handleDownload(item)"><uni-icons type="download" size="16"
							color="var(--ui-BG-Main)"></uni-icons>下载</view>
				</view>
			</scroll-view>
		</view>
	</su-popup>
</template>

<script setup>
	import {
		defineProps,
		reactive
	} from 'vue';
	import {
		downloadFile
	} from '@/sheep/helper/download.js';
  import sheep from '@/sheep';

	const props = defineProps({
		materials: {
			type: Array,
			default: () => []
		}
	});

	const state = reactive({
		showModel: false
	});

	const showPopup = () => {
		state.showModel = true;
	};

	const closePopup = () => {
		state.showModel = false;
	};

	const handleDownload = (material) => {

		downloadFile(sheep.$url.cdn(material.download_url), material.lesson_name);
	};

	defineExpose({
		showPopup,
		closePopup
	});
</script>

<style scoped>
	@import "@/static/iconfont/iconfont.css";
	.materials-popup {
		width: 750px;
		min-height: 500px;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 8px 25px;
	}

	.popup-header {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title {
		font-size: 22px;
		font-weight: bold;
	}

	.close-btn {
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #999;
		cursor: pointer;
	}

	.materials-list {
		max-height: 600px;
		padding: 20rpx;
	}

	.material-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px 0;
		border-bottom: 1rpx solid #e4e4e4;
	}
	.material-icon{
		width: 40px;
		height: 30px;
	}
	.material-info {
		flex: 1;
		padding-right: 10px;
	}

	.lesson-name {
		font-size: 18px;
		color: #333;
	}

	.download-btn {
		cursor: pointer;
		color: var(--ui-BG-Main);
		font-size: 16px;
	}
</style>